import React, { useState, useEffect } from 'react';
import classnames from 'classnames';
import moment from 'moment';
import { connect } from 'dva';
import { Button, Form, Select, Table, Modal, Empty, Tag, message } from 'antd';
import TPage from '@/modules/TPage';
import Service from '@/public/http/services';
import { OrderStatus, GoodsClassify } from '@/public/constant/enums';
import Delivery from './modules/Delivery';
import Detail from './modules/Orderdetail';
import style from './index.css';
const { Option } = Select;
const { Column } = Table;
const List: React.FC<any> = ({ total, list, dispatch }) => {
  const [curPage, setCurPage] = useState(1);
  const [curNickName, setCurNickName] = useState(null);
  const pageSize = 10;
  /**
   * 加载列表数据
   */
  function fetchList({ page, nickname }) {
    dispatch({
      type: 'orderManagement/fetchList',
      payload: {
        page,
        pageSize
      }
    })
  }
  const [formModalVisible, setFormModalVisible] = useState(false);
  const [detailModalVisible, setDetailModalVisible] = useState(false);
  const [curEditInfo, setCurEditInfo] = useState({})
  /**
   * @desc 操作完更新列表
   */
  function reFetchList() {
    fetchList({
      page: curPage,
      nickname: curNickName
    })
  }


  useEffect(({ page = curPage, nickname = curNickName } = {}) => {
    fetchList({ page, nickname })
  }, [curPage, curNickName])
  // 渲染列表查询表单

  const handleQuery = (query) => {
    setCurPage(1);
    setCurNickName(query);
  }


  // 根据渲染类型渲染列表
  const renderActions =
    (record: any) => {
      const status = record.status
      return (
        <>
          {
            status == 1 ?
              <Button className={style.mr8} type={'primary'} onClick={() => { fhfunc(record); }}>发货</Button>
            :''
           }
            <Button className={style.mr8} type={'primary'} onClick={() => { showdetail(record); }}>查看订单详情</Button>
        </>
      );
    }

    const  fhfunc = record =>{
      setCurEditInfo(record);
      setFormModalVisible(true);
    }
   const showdetail = record =>{
     setCurEditInfo(record);
     setDetailModalVisible(true);
   }
  const handleSubmit = (form) => {
    const { validateFields, resetFields } = form;

    validateFields((err, value) => {
      if (!err) {
        const {deliverOrder } = value;
        const id = curEditInfo['id']
        console.log(id)
        console.log(deliverOrder)
        Service.deleveryOrder({ id,deliverOrder }).then((res) => {
            message.info('发货成功');
            resetFields();
            setCurEditInfo({});
            setFormModalVisible(false);
            reFetchList();
        })
      }
    })
  }
  const payMap = {
    0:'支付宝',
    1:'微信'
  }
  const handleCancel = (form) => {
    form.resetFields();
    setCurEditInfo({});
    setFormModalVisible(false);
  }
  const handleDetailCancel = (form) => {
    form.resetFields();
    setCurEditInfo({});
    setDetailModalVisible(false);
  }
  return (
    <TPage>
      <TPage.Title>订单管理列表</TPage.Title>
      <TPage.Table>
        <TPage.Layout className={style.action_block}>
          <TPage.Search
            placeholder={'请输入订单名称，可按回车键搜索'}
            onSearch={handleQuery}
          />
        </TPage.Layout>
        <Table
          className={classnames(style.mt16, style.expert_list)}
          locale={{ emptyText: <Empty description={'无数据'} /> }}
          scroll={{ x: 1440 }}
          dataSource={list}
          pagination={{ total, current: curPage, pageSize, onChange: setCurPage }}
          rowKey={(record: any) => record.orderNo}
        >
          <Column title={'订单号'} width={200} dataIndex={'orderNo'} key={'orderNo'} />
          <Column title={'订单状态'} dataIndex={'status'} key={'status'} render={value => <span className={style[`orderStatus${value}`]}>{OrderStatus[value]}</span>} />
          <Column title={'商品名称'} dataIndex={'goodsName'} key={'goodsName'} />
          <Column title={'商品类型'} dataIndex={'type'} key={'type'} render={(value) => <Tag color={value ? 'volcano' : 'cyan'}>{GoodsClassify[value]}</Tag>} />
          <Column title={'数量'} dataIndex={'num'} key={'num'} />
          <Column title={'运费(元)'} dataIndex={'deliverMoney'} key={'deliverMoney'} />
          <Column title={'订单总价(元)'} dataIndex={'realTotalMoney'} key={'realTotalMoney'} />
          <Column title={'支付方式'} dataIndex={'payFrom'} key={'payFrom'}  render={value => <span >{payMap[value]}</span>}/>
          <Column title={'下单账号'} dataIndex={'userName'} key={'userName'} />
          <Column title={'创建时间'} dataIndex={'createTime'} key={'createTime'} render={(value) => moment(value).format('YYYY-MM-DD hh:mm:ss')} />
          <Column title={'操作'} key={'act'} fixed={'right'} render={renderActions} />
        </Table>
      </TPage.Table>

      <Delivery visible={formModalVisible}
                   title={'发货信息'}
                   formData={ curEditInfo}
                   onOK={(form, data) => handleSubmit(form)}
                   onCancel={handleCancel} />
      <Detail visible={detailModalVisible}
                title={'发货信息'}
                formData={ curEditInfo}
                onOK={handleDetailCancel}
                />
    </TPage>
  );
}
export default connect((state: any) => {
  return {
    list: state.orderManagement.list,
    total: state.orderManagement.total,
  };
})(List);
